<template>
  <el-dialog :title="title" :visible.sync="dialogvisible" width="750px" append-to-body class="my-dialog"
             :close-on-click-modal="false" @close="cancel">
    <el-form ref="form" :model="form" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="1242">
          <el-form-item label="是否需要审核" prop="name">
            <el-switch
              v-model="form.lng"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24">
        <div class="previewlogBody"
             v-loading="codeloading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.6)">
          <div class="applycode savebox" ref="imageDom">
            <div class="apply-code-title">
              <p class="getcode">{{pointData?pointData.name:'未知'}}</p>
              <div class="apply-code-img">
                <div id="qrcode"></div>
              </div>
              <p class="getcode-line">扫一扫进入</p>
            </div>
          </div>
        </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="downloadIamge">下载二维码</el-button>
      <el-button @click="cancel" size="small" plain>确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import html2canvas from 'html2canvas'
import QRCode from "qrcodejs2";

export default {
  props: ['visible', 'pointData'], // param 执勤点信息
  name: "index",
  data() {
    return {
      dialogvisible: false,
      codeloading:false,
      form: {},
      title: '邀请二维码',
    }
  },
  watch: {
    visible() {
      this.dialogvisible = this.visible
      if (this.visible) {
        console.log('pointData', this.pointData)
        this.qrcode()
      } else {
        document.getElementById("qrcode").innerHTML = "";
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('update:visible', false)
    },
    // 生成二维码
    qrcode() {
      // 此处需要区分 问卷 通知
      let self_ = this;
      this.$nextTick(()=>{
        new QRCode('qrcode', {
          width: 220,
          height: 220, // 高度
          text: `https//www.baidu.com`
        })
        setTimeout(() => {
          self_.html2canvasFn()
        }, 100)
      })
    },
    html2canvasFn() {
      let self_ = this
      let opts = {
        useCORS: true
      }
      html2canvas(self_.$refs.imageDom, opts).then(canvas => {
        let image = new Image()
        image.onload = function () {
          self_.imgUrl = canvas.toDataURL('image/png')
          self_.codeloading = false
        }
        image.src = canvas.toDataURL('image/png')
      })
    },
    downloadIamge() { // 下载图片地址和图片名
      let image = new Image()// 解决跨域 Canvas 污染问题
      let this_ = this
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = `${this_.pointData?this_.pointData.name:''}执勤点-区域二维码` || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = this.imgUrl
    }
  }
}
</script>

<style scoped>
.apply-code-title{
  text-align: center;
}
.apply-code-img{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
